<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>前端组件设计器</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 20px;
            background-color: #f5f5f5;
        }
        
        .designer-container {
            display: flex;
            gap: 20px;
            height: 80vh;
        }
        
        .components-panel {
            width: 250px;
            background-color: white;
            border-radius: 8px;
            padding: 15px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            overflow-y: auto;
        }
        
        .component-group {
            margin-bottom: 20px;
        }
        
        .component-group h4 {
            margin-top: 0;
            padding-bottom: 5px;
            border-bottom: 1px solid #eee;
        }
        
        .design-area {
            flex: 1;
            background-color: white;
            border-radius: 8px;
            padding: 15px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            overflow: auto;
        }
        
        .component-item {
            padding: 10px;
            margin-bottom: 10px;
            background-color: #e9f7fe;
            border-radius: 4px;
            cursor: grab;
            border: 1px dashed #4a90e2;
        }
        
        .component-item:hover {
            background-color: #d0ebfc;
        }
        
        .design-surface {
            margin-top: 20px;
            min-height: 300px;
            border: 2px dashed #ccc;
            padding: 20px;
            position: relative;
        }
        
        .design-surface.empty::after {
            content: "将组件拖拽到此处开始设计";
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: #999;
        }
        
        table {
            border-collapse: collapse;
            width: 100%;
        }
        
        th, td {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: left;
        }
        
        th {
            background-color: #f2f2f2;
        }
        
        .form-control {
            margin-bottom: 15px;
        }
        
        label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
        }
        
        input[type="text"], textarea {
            width: 100%;
            padding: 8px;
            border: 1px solid #ddd;
            border-radius: 4px;
            box-sizing: border-box;
        }
        
        button {
            padding: 8px 16px;
            background-color: #4a90e2;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
        
        button:hover {
            background-color: #3a7bc8;
        }
        
        .btn-danger {
            background-color: #e74c3c;
        }
        
        .btn-danger:hover {
            background-color: #c0392b;
        }
        
        .dragging {
            opacity: 0.5;
        }
        
        .component-wrapper {
            margin-bottom: 15px;
            padding: 10px;
            border: 1px solid #eee;
            border-radius: 4px;
            position: relative;
            cursor: move;
            transition: transform 0.2s;
        }
        
        .component-wrapper.dragging {
            transform: scale(0.95);
            opacity: 0.5;
        }
        
        .component-actions {
            position: absolute;
            top: 5px;
            right: 5px;
            display: none;
        }
        
        .component-wrapper:hover .component-actions {
            display: block;
        }
        
        .component-actions button {
            padding: 2px 5px;
            margin-left: 5px;
            font-size: 12px;
        }
        
        .controls-panel {
            margin-top: 20px;
            display: flex;
            gap: 10px;
        }
        
        .properties-panel {
            width: 250px;
            background-color: white;
            border-radius: 8px;
            padding: 15px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            overflow-y: auto;
        }
        
        .property-group {
            margin-bottom: 15px;
        }
        
        .property-group h4 {
            margin-top: 0;
            padding-bottom: 5px;
            border-bottom: 1px solid #eee;
        }
        
        .property-item {
            margin-bottom: 10px;
        }
        
        .property-item label {
            display: block;
            margin-bottom: 5px;
            font-weight: normal;
        }
        
        .container-highlight {
            border: 2px solid #4a90e2 !important;
            background-color: #f0f8ff;
        }
        
        .table-controls {
            margin-top: 10px;
            display: flex;
            gap: 10px;
        }
        
        .component-placeholder {
            height: 40px;
            border: 2px dashed #4a90e2;
            margin: 10px 0;
            background-color: rgba(74, 144, 226, 0.1);
        }
        
        .file-input-container {
            position: relative;
            overflow: hidden;
            display: inline-block;
        }
        
        .file-input-button {
            padding: 8px 16px;
            background-color: #2ecc71;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
        
        .file-input-button:hover {
            background-color: #27ae60;
        }
        
        .file-input {
            position: absolute;
            left: 0;
            top: 0;
            opacity: 0;
            width: 100%;
            height: 100%;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <h1>前端组件设计器</h1>
    
    <div class="designer-container">
        <div class="components-panel">
            <h3>组件面板</h3>
            
            <div class="component-group">
                <h4>表格组件</h4>
                <div class="component-item" draggable="true" data-type="table">表格</div>
                <div class="component-item" draggable="true" data-type="table-header">表头</div>
                <div class="component-item" draggable="true" data-type="table-row">表格行</div>
                <div class="component-item" draggable="true" data-type="table-column">表格列</div>
            </div>
            
            <div class="component-group">
                <h4>表单组件</h4>
                <div class="component-item" draggable="true" data-type="label">标签</div>
                <div class="component-item" draggable="true" data-type="text-input">文本框</div>
                <div class="component-item" draggable="true" data-type="textarea">多行文本框</div>
                <div class="component-item" draggable="true" data-type="button">按钮</div>
            </div>
            
            <div class="component-group">
                <h4>布局组件</h4>
                <div class="component-item" draggable="true" data-type="div">容器</div>
                <div class="component-item" draggable="true" data-type="section">区块</div>
            </div>
        </div>
        
        <div class="design-area">
            <h3>设计区域</h3>
            <div class="design-surface empty" id="designArea"></div>
            
            <div class="controls-panel">
                <button id="clearBtn">清空设计</button>
                <div class="file-input-container">
                    <button class="file-input-button">导入HTML</button>
                    <input type="file" id="importBtn" class="file-input" accept=".html,.htm">
                </div>
                <button id="exportBtn">导出HTML</button>
            </div>
        </div>
        
        <div class="properties-panel" id="propertiesPanel">
            <h3>属性面板</h3>
            <p>选择组件以编辑属性</p>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const designArea = document.getElementById('designArea');
            const componentItems = document.querySelectorAll('.component-item');
            const clearBtn = document.getElementById('clearBtn');
            const exportBtn = document.getElementById('exportBtn');
            const importBtn = document.getElementById('importBtn');
            const propertiesPanel = document.getElementById('propertiesPanel');
            
            let selectedComponent = null;
            let draggedComponent = null;
            let placeholder = null;
            let dropIndex = -1;
            let hoveredContainer = null;
            
            // 初始化拖拽事件
            componentItems.forEach(item => {
                item.addEventListener('dragstart', function(e) {
                    e.dataTransfer.setData('text/plain', this.dataset.type);
                    this.classList.add('dragging');
                });
                
                item.addEventListener('dragend', function() {
                    this.classList.remove('dragging');
                });
            });
            
            // 设计区域拖拽事件
            designArea.addEventListener('dragover', function(e) {
                e.preventDefault();
                
                // 检查是否是组件重新排序拖拽
                if (draggedComponent && draggedComponent.parentNode === designArea) {
                    const components = Array.from(designArea.children).filter(child => 
                        child.classList.contains('component-wrapper')
                    );
                    
                    // 计算放置位置
                    const componentRects = components.map(comp => comp.getBoundingClientRect());
                    const mouseY = e.clientY;
                    
                    // 查找最近的组件
                    let closestIndex = -1;
                    let minDistance = Infinity;
                    
                    componentRects.forEach((rect, index) => {
                        const distance = Math.abs(mouseY - (rect.top + rect.height / 2));
                        if (distance < minDistance) {
                            minDistance = distance;
                            closestIndex = index;
                        }
                    });
                    
                    // 创建或更新占位符
                    if (!placeholder) {
                        placeholder = document.createElement('div');
                        placeholder.className = 'component-placeholder';
                    }
                    
                    // 确定放置位置
                    if (closestIndex >= 0) {
                        const targetRect = componentRects[closestIndex];
                        const shouldPlaceBefore = mouseY < (targetRect.top + targetRect.height / 2);
                        
                        dropIndex = shouldPlaceBefore ? closestIndex : closestIndex + 1;
                        
                        // 插入占位符
                        if (designArea.contains(placeholder)) {
                            designArea.removeChild(placeholder);
                        }
                        
                        if (dropIndex >= components.length) {
                            designArea.appendChild(placeholder);
                        } else {
                            designArea.insertBefore(placeholder, components[dropIndex]);
                        }
                    }
                } else {
                    // 原有容器高亮逻辑
                    updateDropTargetHighlight(e);
                }
            });
            
            designArea.addEventListener('dragleave', function(e) {
                clearDropTargetHighlight();
            });
            
            designArea.addEventListener('drop', function(e) {
                e.preventDefault();
                clearDropTargetHighlight();
                
                // 如果是组件重新排序
                if (draggedComponent && placeholder) {
                    if (designArea.contains(placeholder)) {
                        designArea.removeChild(placeholder);
                    }
                    
                    if (designArea.contains(draggedComponent)) {
                        designArea.removeChild(draggedComponent);
                    }
                    
                    const components = Array.from(designArea.children).filter(child => 
                        child.classList.contains('component-wrapper')
                    );
                    
                    if (dropIndex >= components.length) {
                        designArea.appendChild(draggedComponent);
                    } else {
                        designArea.insertBefore(draggedComponent, components[dropIndex]);
                    }
                    
                    draggedComponent.classList.remove('dragging');
                    draggedComponent = null;
                    placeholder = null;
                    return;
                }
                
                // 原有组件创建逻辑
                const componentType = e.dataTransfer.getData('text/plain');
                
                if (designArea.classList.contains('empty')) {
                    designArea.innerHTML = '';
                    designArea.classList.remove('empty');
                }

                const dropTarget = findDropTarget(e.target);
                
                // 如果是拖放到容器或区块中
                if (dropTarget && (dropTarget.tagName === 'DIV' || dropTarget.tagName === 'SECTION')) {
                    const wrapper = createComponentWrapper(componentType);
                    if (wrapper) {
                        dropTarget.appendChild(wrapper);
                        selectComponent(wrapper);
                    }
                    return;
                }

                // 否则正常添加到设计区域
                const wrapper = createComponentWrapper(componentType);
                if (wrapper) {
                    designArea.appendChild(wrapper);
                    selectComponent(wrapper);
                }
            });
            
            // 更新拖放目标高亮
            function updateDropTargetHighlight(e) {
                const dropTarget = findDropTarget(e.target);
                
                if (hoveredContainer && hoveredContainer !== dropTarget) {
                    hoveredContainer.classList.remove('container-highlight');
                }
                
                if (dropTarget && (dropTarget.tagName === 'DIV' || dropTarget.tagName === 'SECTION')) {
                    dropTarget.classList.add('container-highlight');
                    hoveredContainer = dropTarget;
                } else {
                    hoveredContainer = null;
                }
            }
            
            // 清除拖放目标高亮
            function clearDropTargetHighlight() {
                if (hoveredContainer) {
                    hoveredContainer.classList.remove('container-highlight');
                    hoveredContainer = null;
                }
            }
            
            // 查找有效的拖放目标
            function findDropTarget(element) {
                while (element && element !== designArea) {
                    if (element.classList && element.classList.contains('component-wrapper')) {
                        const innerComponent = element.querySelector('div, section');
                        if (innerComponent && (innerComponent.tagName === 'DIV' || innerComponent.tagName === 'SECTION')) {
                            return innerComponent;
                        }
                    }
                    element = element.parentNode;
                }
                return null;
            }
            
            // 创建组件包装器
            function createComponentWrapper(componentType, element) {
                const wrapper = document.createElement('div');
                wrapper.className = 'component-wrapper';
                wrapper.draggable = true;
                
                // 添加拖拽事件
                wrapper.addEventListener('dragstart', function(e) {
                    draggedComponent = this;
                    this.classList.add('dragging');
                    e.dataTransfer.effectAllowed = 'move';
                    e.dataTransfer.setData('text/plain', 'reorder');
                });
                
                wrapper.addEventListener('dragend', function() {
                    this.classList.remove('dragging');
                    if (placeholder && designArea.contains(placeholder)) {
                        designArea.removeChild(placeholder);
                    }
                    draggedComponent = null;
                    placeholder = null;
                });
                
                let component;
                if (element) {
                    // 从导入的元素创建组件
                    component = element.cloneNode(true);
                    
                    // 保留ID、类名和样式
                    if (element.id) wrapper.id = element.id;
                    if (element.className) wrapper.className = element.className;
                    if (element.style.cssText) wrapper.style.cssText = element.style.cssText;
                    
                    // 根据元素类型设置组件类型
                    if (element.tagName === 'TABLE') {
                        componentType = 'table';
                    } else if (element.tagName === 'TH') {
                        componentType = 'table-header';
                    } else if (element.tagName === 'TR') {
                        componentType = 'table-row';
                    } else if (element.tagName === 'TD') {
                        componentType = 'table-column';
                    } else if (element.tagName === 'LABEL') {
                        componentType = 'label';
                    } else if (element.tagName === 'INPUT' && element.type === 'text') {
                        componentType = 'text-input';
                    } else if (element.tagName === 'TEXTAREA') {
                        componentType = 'textarea';
                    } else if (element.tagName === 'BUTTON') {
                        componentType = 'button';
                    } else if (element.tagName === 'DIV') {
                        componentType = 'div';
                    } else if (element.tagName === 'SECTION') {
                        componentType = 'section';
                    }
                } else {
                    // 从组件面板创建新组件
                    switch(componentType) {
                        case 'table':
                            component = createTable();
                            break;
                        case 'table-header':
                            component = createTableHeader();
                            break;
                        case 'table-row':
                            component = createTableRow();
                            break;
                        case 'table-column':
                            component = createTableColumn();
                            break;
                        case 'label':
                            component = createLabel();
                            break;
                        case 'text-input':
                            component = createTextInput();
                            break;
                        case 'textarea':
                            component = createTextarea();
                            break;
                        case 'button':
                            component = createButton();
                            break;
                        case 'div':
                            component = createDiv();
                            break;
                        case 'section':
                            component = createSection();
                            break;
                        default:
                            return null;
                    }
                }
                
                // 添加操作按钮
                const actions = document.createElement('div');
                actions.className = 'component-actions';
                
                const deleteBtn = document.createElement('button');
                deleteBtn.className = 'btn-danger';
                deleteBtn.textContent = '删除';
                deleteBtn.addEventListener('click', function(e) {
                    e.stopPropagation();
                    wrapper.remove();
                    if (designArea.children.length === 0) {
                        designArea.classList.add('empty');
                    }
                });
                
                actions.appendChild(deleteBtn);
                wrapper.appendChild(actions);
                wrapper.appendChild(component);
                
                // 点击选择组件
                wrapper.addEventListener('click', function(e) {
                    if (e.target !== deleteBtn && !e.target.closest('.table-controls')) {
                        selectComponent(wrapper);
                    }
                });

                return wrapper;
            }

            // 创建容器
            function createDiv() {
                const div = document.createElement('div');
                div.style.padding = '10px';
                div.style.minHeight = '50px';
                div.style.border = '1px dashed #999';
                div.textContent = '容器 - 拖拽组件到这里';
                
                // 添加拖放支持
                div.addEventListener('dragover', function(e) {
                    e.preventDefault();
                    this.classList.add('container-highlight');
                });
                
                div.addEventListener('dragleave', function() {
                    this.classList.remove('container-highlight');
                });
                
                div.addEventListener('drop', function(e) {
                    e.preventDefault();
                    this.classList.remove('container-highlight');
                    const componentType = e.dataTransfer.getData('text/plain');
                    const wrapper = createComponentWrapper(componentType);
                    if (wrapper) {
                        this.appendChild(wrapper);
                        selectComponent(wrapper);
                    }
                });
                
                return div;
            }
            
            // 创建区块
            function createSection() {
                const section = document.createElement('section');
                section.style.padding = '10px';
                section.style.minHeight = '50px';
                section.style.border = '1px dashed #999';
                section.textContent = '区块 - 拖拽组件到这里';
                
                // 添加拖放支持
                section.addEventListener('dragover', function(e) {
                    e.preventDefault();
                    this.classList.add('container-highlight');
                });
                
                section.addEventListener('dragleave', function() {
                    this.classList.remove('container-highlight');
                });
                
                section.addEventListener('drop', function(e) {
                    e.preventDefault();
                    this.classList.remove('container-highlight');
                    const componentType = e.dataTransfer.getData('text/plain');
                    const wrapper = createComponentWrapper(componentType);
                    if (wrapper) {
                        this.appendChild(wrapper);
                        selectComponent(wrapper);
                    }
                });
                
                return section;
            }
            
            // 创建表格
            function createTable() {
                const table = document.createElement('table');
                const thead = document.createElement('thead');
                const tbody = document.createElement('tbody');
                
                // 添加初始表头
                const headerRow = document.createElement('tr');
                const th = document.createElement('th');
                th.contentEditable = true;
                th.textContent = '标题';
                headerRow.appendChild(th);
                thead.appendChild(headerRow);
                
                // 添加初始行
                const row = document.createElement('tr');
                const cell = document.createElement('td');
                cell.contentEditable = true;
                cell.textContent = '数据';
                row.appendChild(cell);
                tbody.appendChild(row);
                
                table.appendChild(thead);
                table.appendChild(tbody);
                
                // 添加操作按钮
                const controls = document.createElement('div');
                controls.className = 'table-controls';
                
                const addRowBtn = document.createElement('button');
                addRowBtn.textContent = '添加行';
                addRowBtn.addEventListener('click', function() {
                    addTableRow(table);
                });
                
                const addColBtn = document.createElement('button');
                addColBtn.textContent = '添加列';
                addColBtn.addEventListener('click', function() {
                    addTableColumn(table);
                });
                
                controls.appendChild(addRowBtn);
                controls.appendChild(addColBtn);
                
                const wrapper = document.createElement('div');
                wrapper.appendChild(table);
                wrapper.appendChild(controls);
                
                return wrapper;
            }
            
            // 创建表头
            function createTableHeader() {
                const headerRow = document.createElement('tr');
                
                const th = document.createElement('th');
                th.contentEditable = true;
                th.textContent = '标题';
                headerRow.appendChild(th);
                
                return headerRow;
            }
            
            // 创建表格行
            function createTableRow() {
                const row = document.createElement('tr');
                
                const cell = document.createElement('td');
                cell.contentEditable = true;
                cell.textContent = '数据';
                row.appendChild(cell);
                
                return row;
            }
            
            // 创建表格列
            function createTableColumn() {
                const col = document.createElement('td');
                col.contentEditable = true;
                col.textContent = '数据';
                return col;
            }
            
            // 添加表格行
            function addTableRow(table) {
                const tbody = table.querySelector('tbody');
                const row = document.createElement('tr');
                
                // 获取列数（从表头）
                let colCount = 0;
                if (table.tHead && table.tHead.rows.length > 0) {
                    colCount = table.tHead.rows[0].cells.length;
                } else if (tbody.rows.length > 0) {
                    colCount = tbody.rows[0].cells.length;
                } else {
                    colCount = 1; // 默认1列
                }
                
                for (let i = 0; i < colCount; i++) {
                    const cell = document.createElement('td');
                    cell.contentEditable = true;
                    cell.textContent = '数据';
                    row.appendChild(cell);
                }
                
                tbody.appendChild(row);
            }
            
            // 添加表格列
            function addTableColumn(table) {
                // 添加表头列
                if (table.tHead && table.tHead.rows.length > 0) {
                    const th = document.createElement('th');
                    th.contentEditable = true;
                    th.textContent = '标题';
                    table.tHead.rows[0].appendChild(th);
                }
                
                // 添加表格体列
                const tbody = table.querySelector('tbody');
                if (tbody) {
                    for (let i = 0; i < tbody.rows.length; i++) {
                        const cell = document.createElement('td');
                        cell.contentEditable = true;
                        cell.textContent = '数据';
                        tbody.rows[i].appendChild(cell);
                    }
                }
            }
            
            // 创建标签
            function createLabel() {
                const label = document.createElement('label');
                label.contentEditable = true;
                label.textContent = '标签文本';
                return label;
            }
            
            // 创建文本框
            function createTextInput() {
                const div = document.createElement('div');
                div.className = 'form-control';
                
                const label = document.createElement('label');
                label.textContent = '文本框';
                
                const input = document.createElement('input');
                input.type = 'text';
                input.placeholder = '请输入内容';
                
                div.appendChild(label);
                div.appendChild(input);
                return div;
            }
            
            // 创建多行文本框
            function createTextarea() {
                const div = document.createElement('div');
                div.className = 'form-control';
                
                const label = document.createElement('label');
                label.textContent = '多行文本框';
                
                const textarea = document.createElement('textarea');
                textarea.rows = 3;
                textarea.placeholder = '请输入内容';
                
                div.appendChild(label);
                div.appendChild(textarea);
                return div;
            }
            
            // 创建按钮
            function createButton() {
                const button = document.createElement('button');
                button.textContent = '按钮';
                return button;
            }
            
            // 选择组件
            function selectComponent(wrapper) {
                if (selectedComponent) {
                    selectedComponent.style.borderColor = '#eee';
                }
                
                selectedComponent = wrapper;
                wrapper.style.borderColor = '#4a90e2';
                
                // 更新属性面板
                updatePropertiesPanel(wrapper);
            }
            
            // 更新属性面板
            function updatePropertiesPanel(wrapper) {
                const component = wrapper.querySelector('*:not(.component-actions)');
                propertiesPanel.innerHTML = '<h3>属性面板</h3>';
                
                const group = document.createElement('div');
                group.className = 'property-group';
                
                const title = document.createElement('h4');
                title.textContent = '通用属性';
                group.appendChild(title);
                
                // 添加ID属性
                const idItem = document.createElement('div');
                idItem.className = 'property-item';
                
                const idLabel = document.createElement('label');
                idLabel.textContent = 'ID';
                
                const idInput = document.createElement('input');
                idInput.type = 'text';
                idInput.value = wrapper.id || '';
                idInput.addEventListener('change', function() {
                    wrapper.id = this.value;
                });
                
                idItem.appendChild(idLabel);
                idItem.appendChild(idInput);
                group.appendChild(idItem);
                
                // 添加类名属性
                const classItem = document.createElement('div');
                classItem.className = 'property-item';
                
                const classLabel = document.createElement('label');
                classLabel.textContent = '类名';
                
                const classInput = document.createElement('input');
                classInput.type = 'text';
                classInput.value = wrapper.className || '';
                classInput.addEventListener('change', function() {
                    wrapper.className = this.value;
                });
                
                classItem.appendChild(classLabel);
                classItem.appendChild(classInput);
                group.appendChild(classItem);
                
                // 添加样式属性
                const styleItem = document.createElement('div');
                styleItem.className = 'property-item';
                
                const styleLabel = document.createElement('label');
                styleLabel.textContent = '样式';
                
                const styleInput = document.createElement('input');
                styleInput.type = 'text';
                styleInput.value = wrapper.style.cssText || '';
                styleInput.addEventListener('change', function() {
                    wrapper.style.cssText = this.value;
                });
                
                styleItem.appendChild(styleLabel);
                styleItem.appendChild(styleInput);
                group.appendChild(styleItem);
                
                propertiesPanel.appendChild(group);
                
                // 组件特定属性
                if (component.tagName === 'LABEL') {
                    const textGroup = document.createElement('div');
                    textGroup.className = 'property-group';
                    
                    const textTitle = document.createElement('h4');
                    textTitle.textContent = '文本属性';
                    textGroup.appendChild(textTitle);
                    
                    const textItem = document.createElement('div');
                    textItem.className = 'property-item';
                    
                    const textLabel = document.createElement('label');
                    textLabel.textContent = '文本内容';
                    
                    const textInput = document.createElement('input');
                    textInput.type = 'text';
                    textInput.value = component.textContent;
                    textInput.addEventListener('change', function() {
                        component.textContent = this.value;
                    });
                    
                    textItem.appendChild(textLabel);
                    textItem.appendChild(textInput);
                    textGroup.appendChild(textItem);
                    
                    propertiesPanel.appendChild(textGroup);
                } else if (component.tagName === 'INPUT' && component.type === 'text') {
                    const textGroup = document.createElement('div');
                    textGroup.className = 'property-group';
                    
                    const textTitle = document.createElement('h4');
                    textTitle.textContent = '文本框属性';
                    textGroup.appendChild(textTitle);
                    
                    const placeholderItem = document.createElement('div');
                    placeholderItem.className = 'property-item';
                    
                    const placeholderLabel = document.createElement('label');
                    placeholderLabel.textContent = '占位文本';
                    
                    const placeholderInput = document.createElement('input');
                    placeholderInput.type = 'text';
                    placeholderInput.value = component.placeholder || '';
                    placeholderInput.addEventListener('change', function() {
                        component.placeholder = this.value;
                    });
                    
                    placeholderItem.appendChild(placeholderLabel);
                    placeholderItem.appendChild(placeholderInput);
                    textGroup.appendChild(placeholderItem);
                    
                    propertiesPanel.appendChild(textGroup);
                } else if (component.tagName === 'TEXTAREA') {
                    const textGroup = document.createElement('div');
                    textGroup.className = 'property-group';
                    
                    const textTitle = document.createElement('h4');
                    textTitle.textContent = '多行文本框属性';
                    textGroup.appendChild(textTitle);
                    
                    const rowsItem = document.createElement('div');
                    rowsItem.className = 'property-item';
                    
                    const rowsLabel = document.createElement('label');
                    rowsLabel.textContent = '行数';
                    
                    const rowsInput = document.createElement('input');
                    rowsInput.type = 'number';
                    rowsInput.value = component.rows || 3;
                    rowsInput.addEventListener('change', function() {
                        component.rows = this.value;
                    });
                    
                    rowsItem.appendChild(rowsLabel);
                    rowsItem.appendChild(rowsInput);
                    textGroup.appendChild(rowsItem);
                    
                    const placeholderItem = document.createElement('div');
                    placeholderItem.className = 'property-item';
                    
                    const placeholderLabel = document.createElement('label');
                    placeholderLabel.textContent = '占位文本';
                    
                    const placeholderInput = document.createElement('input');
                    placeholderInput.type = 'text';
                    placeholderInput.value = component.placeholder || '';
                    placeholderInput.addEventListener('change', function() {
                        component.placeholder = this.value;
                    });
                    
                    placeholderItem.appendChild(placeholderLabel);
                    placeholderItem.appendChild(placeholderInput);
                    textGroup.appendChild(placeholderItem);
                    
                    propertiesPanel.appendChild(textGroup);
                } else if (component.tagName === 'BUTTON') {
                    const textGroup = document.createElement('div');
                    textGroup.className = 'property-group';
                    
                    const textTitle = document.createElement('h4');
                    textTitle.textContent = '按钮属性';
                    textGroup.appendChild(textTitle);
                    
                    const textItem = document.createElement('div');
                    textItem.className = 'property-item';
                    
                    const textLabel = document.createElement('label');
                    textLabel.textContent = '按钮文本';
                    
                    const textInput = document.createElement('input');
                    textInput.type = 'text';
                    textInput.value = component.textContent;
                    textInput.addEventListener('change', function() {
                        component.textContent = this.value;
                    });
                    
                    textItem.appendChild(textLabel);
                    textItem.appendChild(textInput);
                    textGroup.appendChild(textItem);
                    
                    propertiesPanel.appendChild(textGroup);
                } else if (component.tagName === 'TABLE') {
                    const tableGroup = document.createElement('div');
                    tableGroup.className = 'property-group';
                    
                    const tableTitle = document.createElement('h4');
                    tableTitle.textContent = '表格属性';
                    tableGroup.appendChild(tableTitle);
                    
                    const borderItem = document.createElement('div');
                    borderItem.className = 'property-item';
                    
                    const borderLabel = document.createElement('label');
                    borderLabel.textContent = '边框宽度';
                    
                    const borderInput = document.createElement('input');
                    borderInput.type = 'text';
                    borderInput.value = component.style.borderWidth || '';
                    borderInput.addEventListener('change', function() {
                        component.style.borderWidth = this.value;
                    });
                    
                    borderItem.appendChild(borderLabel);
                    borderItem.appendChild(borderInput);
                    tableGroup.appendChild(borderItem);
                    
                    propertiesPanel.appendChild(tableGroup);
                }
            }
            
            // 清空设计
            clearBtn.addEventListener('click', function() {
                designArea.innerHTML = '';
                designArea.classList.add('empty');
                propertiesPanel.innerHTML = '<h3>属性面板</h3><p>选择组件以编辑属性</p>';
            });
            
            // 导出HTML
            exportBtn.addEventListener('click', function() {
                if (designArea.classList.contains('empty')) {
                    alert('请先添加组件');
                    return;
                }
                
                // 克隆设计区域以避免修改原始DOM
                const designAreaClone = designArea.cloneNode(true);
                
                // 移除所有操作按钮
                const actionButtons = designAreaClone.querySelectorAll('.component-actions');
                actionButtons.forEach(button => button.remove());
                
                // 移除所有包装器类
                const wrappers = designAreaClone.querySelectorAll('.component-wrapper');
                wrappers.forEach(wrapper => {
                    // 保留组件的ID、类名和样式
                    const component = wrapper.querySelector('*:not(.component-actions)');
                    if (component) {
                        wrapper.id = component.id || '';
                        wrapper.className = component.className || '';
                        wrapper.style.cssText = component.style.cssText || '';
                        
                        // 将组件内容移动到包装器
                        while (component.firstChild) {
                            wrapper.appendChild(component.firstChild);
                        }
                        
                        // 移除空组件元素
                        if (component.parentNode === wrapper) {
                            wrapper.removeChild(component);
                        }
                    }
                });
                
                // 移除表格控制按钮
                const tableControls = designAreaClone.querySelectorAll('.table-controls');
                tableControls.forEach(control => control.remove());
                
                const html = `
                    <!DOCTYPE html>
                    <html>
                    <head>
                        <title>设计结果</title>
                        <style>
                            body {
                                font-family: Arial, sans-serif;
                                margin: 0;
                                padding: 20px;
                            }
                            
                            table {
                                border-collapse: collapse;
                                width: 100%;
                            }
                            
                            th, td {
                                border: 1px solid #ddd;
                                padding: 8px;
                                text-align: left;
                            }
                            
                            th {
                                background-color: #f2f2f2;
                            }
                            
                            .form-control {
                                margin-bottom: 15px;
                            }
                            
                            label {
                                display: block;
                                margin-bottom: 5px;
                                font-weight: bold;
                            }
                            
                            input[type="text"], textarea {
                                width: 100%;
                                padding: 8px;
                                border: 1px solid #ddd;
                                border-radius: 4px;
                                box-sizing: border-box;
                            }
                            
                            button {
                                padding: 8px 16px;
                                background-color: #4a90e2;
                                color: white;
                                border: none;
                                border-radius: 4px;
                                cursor: pointer;
                            }
                        </style>
                    </head>
                    <body>
                        ${designAreaClone.innerHTML}
                    </body>
                    </html>
                `;
                
                const blob = new Blob([html], { type: 'text/html' });
                const url = URL.createObjectURL(blob);
                const a = document.createElement('a');
                a.href = url;
                a.download = 'design-result.html';
                a.click();
                URL.revokeObjectURL(url);
            });
            
            // 导入HTML
            importBtn.addEventListener('change', function(e) {
                const file = e.target.files[0];
                if (!file) return;
                
                const reader = new FileReader();
                reader.onload = function(e) {
                    const content = e.target.result;
                    
                    // 创建一个临时DOM来解析导入的HTML
                    const parser = new DOMParser();
                    const doc = parser.parseFromString(content, 'text/html');
                    
                    // 清空设计区域
                    designArea.innerHTML = '';
                    designArea.classList.remove('empty');
                    
                    // 获取body中的所有子元素
                    const body = doc.body;
                    const elements = Array.from(body.children);
                    
                    // 遍历所有元素并创建对应的组件
                    elements.forEach(element => {
                        const wrapper = createComponentWrapper(null, element);
                        if (wrapper) {
                            designArea.appendChild(wrapper);
                        }
                    });
                    
                    // 重置文件输入，以便可以再次选择同一个文件
                    importBtn.value = '';
                };
                reader.readAsText(file);
            });
        });
    </script>
</body>
</html>